<template>
	<view class="tabbar">
		<!--
		<view v-for="(item, index) in tabbarList" :key="index" class="tabbar-item"
			:class="{ 'active': index === activeIndex }" @click="switchTab(index,tabbarList)">
			<div style="width: 100%;text-align: center;">
				<image :src="index === activeIndex?item.activeIcon:item.icon" style="width: 1.5em;height: 1.5em;">
				</image>
				<div style="margin-top: -0.5em;font-size: 0.8em;">{{ item.text }}</div>
			</div>

		</view>
		-->
		<view class="tabbar-item" :class="{ 'active': 0 === activeIndex }" @click="switchTab(0,'/pages/index/index')">
			<div style="width: 100%;text-align: center;">
				<image :src="0 === activeIndex?tabbarList[0].activeIcon:tabbarList[0].icon"
					style="width: 1.5em;height: 1.5em;">
				</image>
				<div style="margin-top: -0.5em;font-size: 0.8em;">品牌介绍</div>
			</div>
		</view>

		<view class="tabbar-item" :class="{ 'active': 1 === activeIndex }" @click="switchTab(1,'/guarantee/addlist')">
			<div style="width: 100%;text-align: center;">
				<image :src="1 === activeIndex?tabbarList[1].activeIcon:tabbarList[1].icon"
					style="width: 1.5em;height: 1.5em;">
				</image>
				<div style="margin-top: -0.5em;font-size: 0.8em;">质保录入</div>
			</div>
		</view>

		<view class="tabbar-item" :class="{ 'active': 2 === activeIndex }" @click="switchTab(2,'/guarantee/list')">
			<div style="width: 100%;text-align: center;">
				<image :src="2 === activeIndex?tabbarList[2].activeIcon:tabbarList[2].icon"
					style="width: 1.5em;height: 1.5em;">
				</image>
				<div style="margin-top: -0.5em;font-size: 0.8em;">质保查询</div>
			</div>
		</view>

		<view class="tabbar-item" :class="{ 'active': 3 === activeIndex }" @click="switchTab(3,'/offer/index')">
			<div style="width: 100%;text-align: center;">
				<image :src="3 === activeIndex?tabbarList[3].activeIcon:tabbarList[3].icon"
					style="width: 1.5em;height: 1.5em;">
				</image>
				<div style="margin-top: -0.5em;font-size: 0.8em;">报价查询</div>
			</div>
		</view>

	</view>
</template>

<script>
	import api from '@/common/httprequest.js'

	export default {
		props: {
			isIndexPage: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				activeIndex: 0,
				tabbarList: [{
					'activeIcon': '/static/tabbar/pinpai1.png',
					'icon': '/static/tabbar/pinpai.png'
				}, {
					'activeIcon': '/static/tabbar/luru1.png',
					'icon': '/static/tabbar/luru.png'
				}, {
					'activeIcon': '/static/tabbar/zhibao1.png',
					'icon': '/static/tabbar/zhibao.png'
				}, {
					'activeIcon': '/static/tabbar/chaxun1.png',
					'icon': '/static/tabbar/chaxun.png'
				}]
			};
		},
		mounted() {
			if (this.isIndexPage == true) {
				this.activeIndex = 0;
			} else {
				let tabIndex = uni.getStorageSync('tabIndex');
				if (tabIndex) {
					this.activeIndex = tabIndex;
				} else {
					uni.setStorageSync('tabIndex', 0);
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}
			}
		},
		methods: {
			switchTab(index, url) {
				this.activeIndex = index;
				//this.$emit('tabbar_switchTab', index, objs);
				uni.setStorageSync('tabIndex', index);
				uni.redirectTo({
					url: url
				})
			},
		},
	};
</script>

<style scoped>
	@import '@/styles/global.css';

	.tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #323232;
	}

	.tabbar-item {
		color: #ccc;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2px solid #D48C00;
		transition: color 0.3s;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
	}

	.tabbar-item.active {
		color: #D48C00;
	}
</style>